<template>
    <div>
        <div class="border-box padding-box">
            <!-- 首页面板 -->
            <div class="swipe card border-box">
                <!-- 滚动播放 -->
                <van-swipe style="height:100%" :autoplay="3000">
                    <van-swipe-item style="height:100%" class="flex-center" v-for="(image, index) in images"
                        :key="index">
                        <img style="height:100%" v-lazy="image" />
                    </van-swipe-item>
                </van-swipe>
            </div>
            <div @click="toSales">
                <van-notice-bar class="margin-top-10 bora-10" color="#3268e8" background="#ecf9ff" left-icon="gem-o">
                    <div class="flex-bew">
                        <span> 今日销冠：{{ userName }}</span><span>{{ date.getFullYear() + '-' + (date.getMonth() + 1
                ) + '-' + date.getDate() }}<van-icon class="margin-left-10" name="arrow" /></span>
                    </div>
                </van-notice-bar>
            </div>
            <div>
                <div class="margin-top-10">每日推荐</div>
                <van-card v-for="(item,index) in productLists" :key="index" class="margin-top-10 bora-10" :tag="item.tag" :num="item.num" :price="item.price" :desc="item.desc" :title="item.title"
                    :thumb="item.thumb">
                    <template #tags>
                        <van-tag plain type="danger" v-for="(tag,index) in item.tags" :key="index">{{ tag }}</van-tag>
                    </template>
                    <template #footer>
                        <van-button type="info" size="small" plain hairline :disabled="item.thumb.length!=0"  v-for="(fBtn,index) in item.footer" :key="index">{{ fBtn }}</van-button>
                    </template>
                </van-card>
            </div>
        </div>
        <van-divider :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 16px' }">
            暂无更多
        </van-divider>
        <div style="width: 100%;height:8vh"></div>
        <tabbar></tabbar>
    </div>
</template>
<script>
import tabbar from '../../components/tabbar/index.vue';
export default {
    name: 'App',
    components: {
        tabbar,
    },
    data() {
        return {
            images: [
                require('../../assets/home_img/01.jpg'),
                require('../../assets/home_img/02.jpg'),
                require('../../assets/home_img/03.jpg'),
                require('../../assets/home_img/04.jpg'),
                require('../../assets/home_img/05.jpg'),
                require('../../assets/home_img/06.jpg'),
            ],
            productLists:[
                {
                    thumb:require('../../assets/home_img/01.jpg'),
                    desc:'图片',
                    title:'入木三分',
                    price:'1200.00',
                    num:'5',
                    tag:'降价',
                    tags:['张三 | 代理中'],//标签
                    footer:['申请售卖'],//按钮
                },
                {
                    thumb:require('../../assets/home_img/02.jpg'),
                    desc:'楠木 高40 宽26 厚18',
                    title:'明代木雕·张天师',
                    price:'5000.00',
                    num:'5',
                    tag:'降价',
                    tags:['张三 | 代理中'],//标签
                    footer:['申请售卖'],//按钮
                },
                {
                    thumb:require('../../assets/home_img/03.jpg'),
                    desc:'描述信息',
                    title:'标题',
                    price:'20000.00',
                    num:'5',
                    tag:'降价',
                    tags:['张三 | 代理中'],//标签
                    footer:['申请售卖'],//按钮
                },
                {
                    thumb:require('../../assets/home_img/04.jpg'),
                    desc:'描述信息',
                    title:'标题',
                    price:'2220.00',
                    num:'5',
                    tag:'降价',
                    tags:['张三 | 代理中'],//标签
                    footer:['申请售卖'],//按钮
                },
                {
                    thumb:require('../../assets/home_img/05.jpg'),
                    desc:'描述信息',
                    title:'标题',
                    price:'9800.00',
                    num:'5',
                    tag:'降价',
                    tags:['张三 | 代理中'],//标签
                    footer:['申请售卖'],//按钮
                },
                {
                    thumb:require('../../assets/home_img/06.jpg'),
                    desc:'描述信息',
                    title:'标题',
                    price:'3200.00',
                    num:'5',
                    tag:'降价',
                    tags:['张三 | 代理中'],//标签
                    footer:['申请售卖'],//按钮
                },
            ],
            userName: '张三',
            date: new Date()
        }
    },
    methods:{
        toSales(){
            this.$router.push({
                path:'/sales',
                query:{date:'2024/8/16'}
            })
        }
    }
}
</script>
<style scoped>
.swipe {
    height: 30vh;
    width: 100%;
    background-color: #fff;

}

div /deep/.van-notice-bar__content {
    width: 100%;
}
</style>